// 为什么 first-letter 可以设置 float 之类的，而 first-line 不行呢？
// 因为first-letter是针对排版后的第一行，所以不能设置影响排版的样式，如果能设置选取的元素就会有变化




/**
 * 匹配选择器
 */
function matchSelecter(selector, element) {
    // 标签选择器
    const tagSelector = selector.match(/^[\w]+/gm);
    // id选择器
    const idSelector = selector.match(/(?<=#)([\w\d\-\_]+)/gm);
    // 类选择器
    const classSelector = selector.match(/(?<=.)([\w\d\-\_]+)/gm);

    /**
     * 实现复合选择器，支持空格的class选择器
     */
    // 检查tagName是否匹配
    if (tagSelector) {
        if (element.tagName.toLowerCase() !== tagSelector[0]) return false;
    }

    // 检查id是否匹配
    if (idSelector) {
        const attr = element.id;
        if (attr) {
            for (let s of idSelector) {
                if (attr.split(' ').indexOf(s) === -1) return false;
            }
        }
    }

    // 检查class是否匹配
    if (classSelector) {
        const attr = element.className;
        if (attr) {
            for (let s of classSelector) {
                if (attr.split(' ').indexOf(s) === -1) return false;
            }
        }
    }

    return true;
}

/**
 * 匹配元素
 */
function match(selector, element) {
    if (!selector || !element.attributes) return false;

    const selectors = selector.split(' ').reverse();

    if (!matchSelecter(selectors[0], element)) return false;

    let curElement = element;
    let matched = 1;

    // 递归寻找父级元素匹配
    while (curElement.parentElement !== null && matched < selectors.length) {
        curElement = curElement.parentElement;
        if (matchSelecter(selectors[matched], curElement)) matched ++;
    }

    // 所有选择器匹配上为匹配成功，否则失败
    if (matched !== selectors.length) return false;

    return true;
}

console.log(match("div #id.class", document.getElementById("id")));